<template>
	<view class="checkin-process page PA-add">
		<view class="line"></view>
		<view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
            <view class="cu-dialog">
                <view class="cu-bar bg-white justify-end">
                    <view class="content">图片预览</view>
                    <view class="action" @tap="hideModal">
                        <text class="cuIcon-close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">                    
                    <img :src="yulanimg" alt=""  />
                </view>
            </view>
        </view>
		<view class="formview">
			<form action="">
				<view >
					<view class="orderTypeTitle">发票类型</view>
					<view class="yudingbox">
						<view class="item"><view class="bg"><text  :class="adddata.invoiceType=='2'? 'borderblue':''" @click="selectInvoiceType('2')" >个人发票</text></view></view>		
						<view class="item"><view class="bg"><text  :class="adddata.invoiceType=='1'? 'borderblue':''" @click="selectInvoiceType('1')">企业发票</text></view></view>			
					</view>	
					<view style="font-size: 20upx;padding-left: 60upx;padding-top: 40upx;padding-bottom: 60upx;">企业发票必须填写纳税人识别号（税号）才可作为合法税务凭证</view>
				</view>	
				<view class="cu-form-group">
					<view class="title"><text style="color: #FF9125;">*</text>发票抬头：</view>
					<input
						placeholder="请输入发票抬头"
						name="input"
						placeholder-style="color:#ccc"
						v-model="adddata.invoiceTitle"										
					></input>
					<view @click='chooseInvoiceTitle' class="chooseInvoiceTitle">获取</view>
				</view>				
				<view class="cu-form-group" v-show="adddata.invoiceType=='1'">
					<view class="title"><text style="color: #FF9125;">*</text>税<text style="color: #fff;">空格</text>号：</view>
					<input
						placeholder="纳税人识别号"
						name="input"
						placeholder-style="color:#ccc"
						v-model="adddata.taxpayerRegistrationNum"
					></input>
				</view>
				<view class="cu-form-group">
					<view class="title"><text style="color: #FF9125;">*</text>姓<text style="color: #fff;">空格</text>名：</view>
					<input
						placeholder="开票人姓名"
						name="input"
						placeholder-style="color:#ccc"
						v-model="adddata.invoiceName"
					></input>
				</view>	
				<view class="cu-form-group">
					<view class="title"><text style="color: #FF9125;">*</text>手机号码：</view>
					<input type="number"
						placeholder="开票人手机号"
						name="input"
						placeholder-style="color:#ccc"
						v-model="adddata.invoicePhone"
						@click.native="$event.target.value = $event.target.value.replace(/^\s+|\s+$/gm,'')"
					></input>
				</view>
				<view class="cu-form-group">
					<view class="title"><text style="color: #fff;">*</text>邮箱地址：</view>
					<input 
						placeholder="备用邮箱地址"
						name="input"
						placeholder-style="color:#ccc"
						v-model="adddata.invoiceEmail"										
					></input>
				</view>
				<view class="cu-form-group"  v-show="adddata.invoiceType=='1'">
					<view class="title"><text style="color: #fff;">*</text>开户行账号：</view>
					<input type="number"
						placeholder="账号"
						name="input"
						placeholder-style="color:#ccc"
						v-model="adddata.bankAndNumber"
													
					></input>
				</view>	
				<view class="cu-form-group"  v-show="adddata.invoiceType=='1'">
					<view class="title"><text style="color: #fff;">*</text>地址及电话：</view>
					<input type="number"
						placeholder="地址及电话"
						name="input"
						v-model="adddata.addressAndTelephone"
						placeholder-style="color:#ccc"
														
					></input>
				</view>																
			</form>
           
			<view class="flex">
				<view class="sendbtn">
					<button					
						class="cu-btn"						
						@click="send"
						:loading="loading"
						:disabled="isDisabled"
					>确定</button>
					
				</view>
				
			</view>

		</view>				
	</view>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      isDisabled: false,
      adddata: {
        invoiceType: "2", // (string, optional): 发票类型（1:企业 2:个人） ,
        invoiceTitle: "", // (string, optional): 发票抬头 ,
        taxpayerRegistrationNum: "", //(string, optional): 纳税人识别号
        invoiceName: "", // (string, optional): 开票人姓名 ,
        invoicePhone: "", // (string, optional): 联系人手机号 ,
        invoiceEmail: null, //(string, optional): 邮箱地址 ,
        sysPhoneNumber: uni.getStorageSync("phone"), // (string, optional): 登录人手机号码 ,
        invoiceTemplateId: "", // (string, optional): 发票模板ID ,

        addressAndTelephone: "",
        bankAndNumber: "",
        // bankAccountNumber:'',// (string, optional): 账户(银行账号) ,
        // bankOpen:'',// (string, optional): 开户行 ,
        // phone:'',// (string, optional): 电话 ,
        // registeredAddress:'',// (string, optional): 注册地址 ,
      },
      date: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      lshowPicker: false,
      endlshowPicker: false,
      eshowPicker: false,
      pickerValueArray: [],
      mode: "",
      deepLength: 1,
      pickerValueDefault: [0],
      HotelId: "",
      Hotelname: "",

      fpickerValueArray: [],
      fpickerValueDefault: [0],
      roleId: "",
      roleName: "",
      add: "",
      modalName: "",
      yulanimg: "",
    };
  },
  methods: {
    selectInvoiceType(type) {
      this.adddata.invoiceType = type;
      this.adddata.invoiceTitle = ""; // (string, optional): 发票抬头 ,
      this.adddata.taxpayerRegistrationNum = ""; //(string, optional): 纳税人识别号
      this.adddata.invoiceName = ""; // (string, optional): 开票人姓名 ,
      this.adddata.invoicePhone = ""; // (string, optional): 联系人手机号 ,
      this.adddata.invoiceEmail = null; //(string, optional): 邮箱地址 ,
    },
    // 获取酒店列表
    getHotelList() {
      this.$http
        .get(
          "/worker/hotel/select",
          {
            workerId: uni.getStorageSync("user").userInfo.phoneNumber,
          },
          {
            header: {} /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            let arr = data.data.map((item) => {
              return {
                label: item.hotelName,
                value: item.hotelId,
                type: item.hotelType,
              };
            });
            this.pickerValueArray = arr;
            if (arr[0].value) {
              this.pickerValueDefault = [arr[0].value];
              this.pickerText = [arr[0].label];
            }
          } else {
            uni.showToast({
              title: data.msg,
              image: "/static/img/warn.png",
              duration: 2000,
            });
          }
        })
        .catch((err) => {});
    },

    getRoleList() {
      this.$http
        .get(
          "/could/obtinCodeMsgList",
          {
            codeType: "role",
          },
          {
            header: {} /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          console.log(res);
          let data = res.data;
          if (data.code == 0) {
            let arr = data.rows.map((item) => {
              return {
                label: item.coedKeyCn,
                value: item.codeId,
              };
            });
            this.fpickerValueArray = arr;
            if (arr[0].value) {
              this.fpickerValueDefault = arr[0].value;
              this.fpickerText = arr[0].label;
            }
          } else {
            uni.showToast({
              title: data.msg,
              image: "/static/img/warn.png",
              duration: 2000,
            });
          }
        })
        .catch((err) => {});
    },

    //角色下拉点击确定

    yulan(name) {
      console.log(22);
      this.yulanimg = this.adddata[name];
      this.modalName = "Modal";
    },
    hideModal() {
      this.modalName = "";
    },

    DateChange(e) {
      this.date = e.detail.value;
      this.sendData.leaveTime = e.detail.value;
      console.log(e.detail.value);
      var date1 = new Date(this.selectDate);
      var date2 = new Date(this.date);
      var s1 = date1.getTime(),
        s2 = date2.getTime();
      var total = (s2 - s1) / 1000;
      var day = Math.round(total / (24 * 60 * 60));
      this.totalTime = day;
    },
    bindPickerChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.target.value);
      this.index = e.target.value;
      this.sendData.orderSource = this.array[e.target.value];
    },
    fpbindPickerChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.target.value);
      this.fpid = e.target.value;
      this.sendData.invoiceStatus = this.fp[e.target.value].codeId;
    },

    //确认添加  编辑
    send() {
      setTimeout((res) => {
        console.log("bbbbbbbbbbb");
        console.log(this.loading);
        if (!this.loading) {
          this.loading = true;
          this.isDisabled = true;
          if (this.add == 0) {
            //等于0  是编辑
            this.editPA();
            return;
          } else {
            this.addPA();
            return;
          }
        }
      }, 500);
    },
    addPA() {
      let adddata = {
        ...this.adddata,
      };
      if (!adddata.invoiceTitle) {
        uni.showToast({
          icon: "none",
          title: "请填写发票抬头",
          duration: 2000,
        });
        this.loading = false;
        this.isDisabled = false;
        return;
      }

      if (
        adddata.invoiceType == "1" &&
        !/^[A-Z0-9]{15}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(
          adddata.taxpayerRegistrationNum
        )
      ) {
        uni.showToast({
          icon: "none",
          title: "请填正确税号",
          duration: 2000,
        });
        this.loading = false;
        this.isDisabled = false;
        return;
      }

      if (!adddata.invoiceName) {
        uni.showToast({
          icon: "none",
          title: "请填开票人姓名",
          duration: 2000,
        });
        this.loading = false;
        this.isDisabled = false;
        return;
      }
      if (!adddata.invoicePhone) {
        uni.showToast({
          icon: "none",
          title: "请填开票人手机号",
          duration: 2000,
        });
        this.loading = false;
        this.isDisabled = false;
        return;
      }

      if (
        !/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/.test(
          adddata.invoicePhone
        )
      ) {
        uni.showToast({
          icon: "none",
          title: "请填正确手机号",
          duration: 2000,
        });
        this.loading = false;
        this.isDisabled = false;
        return;
      }
      if (adddata.invoiceEmail != null) {
        if (
          !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
            adddata.invoiceEmail
          )
        ) {
          uni.showToast({
            icon: "none",
            title: "请填正确邮箱",
            duration: 2000,
          });
          this.loading = false;
          this.isDisabled = false;
          return;
        }
      }

      if (this.isDisabled) {
        this.$http
          .post("/template/insert", adddata, {
            header: {
              "Content-Type": "application/json;charset=UTF-8",
            } /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          })
          .then((res) => {
            this.loading = true;
            this.isDisabled = true;
            console.log(res);
            let data = res.data;
            if (data.code == 0) {
              uni.showToast({
                icon: "../../static/img/success.png",
                title: "添加成功",
                duration: 1000,
              });

              uni.navigateBack({
                delta: 1,
              });
              return false;
            } else {
              uni.showToast({
                icon: "../../static/img/warn.png",
                title: data.msg,
                duration: 1000,
              });
            }
            setTimeout(() => {
              this.isDisabled = false; //响应后延迟几秒回复正常；
              this.loading = false;
            }, 2000);
          })
          .catch((err) => {});
      }
    },
    editPA() {
      let adddata = {
        ...this.adddata,
      };
      if (!adddata.invoiceTitle) {
        uni.showToast({
          icon: "none",
          title: "请填写发票抬头",
          duration: 2000,
        });
        this.loading = false;
        this.isDisabled = false;
        return;
      }
      if (adddata.invoiceType == "1") {
        if (!adddata.taxpayerRegistrationNum) {
          uni.showToast({
            icon: "none",
            title: "请填写税号",
            duration: 2000,
          });
          this.loading = false;
          this.isDisabled = false;
          return;
        }
      }
      if (!adddata.invoiceName) {
        uni.showToast({
          icon: "none",
          title: "请填开票人姓名",
          duration: 2000,
        });
        this.loading = false;
        this.isDisabled = false;
        return;
      }
      if (!adddata.invoicePhone) {
        uni.showToast({
          icon: "none",
          title: "请填开票人手机号",
          duration: 2000,
        });
        this.loading = false;
        this.isDisabled = false;
        return;
      }
      if (
        !/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/.test(
          adddata.invoicePhone
        )
      ) {
        uni.showToast({
          icon: "none",
          title: "请填正确手机号",
          duration: 2000,
        });
        this.loading = false;
        this.isDisabled = false;
        return;
      }

      this.$http
        .post("/template/updateTemplate", adddata, {
          header: {
            "Content-Type": "application/json;charset=UTF-8",
          } /* 会覆盖全局header */,
          dataType: "json",
          responseType: "text",
        })
        .then((res) => {
          console.log(res);
          let data = res.data;
          if (data.code == 0) {
            uni.navigateBack();
            uni.showToast({
              icon: "../../static/img/success.png",
              title: "编辑成功",
              duration: 1000,
            });
          } else {
            uni.showToast({
              icon: "../../static/img/warn.png",
              title: data.msg,
              duration: 1000,
            });
          }
          setTimeout(() => {
            this.isDisabled = false; //响应后延迟几秒回复正常；
            this.loading = false;
          }, 2000);
        })
        .catch((err) => {});
    },

    handleAdd() {
      this.sendData.tenantDTOList.push({
        orderId: "",
        tenantId: "",
        tenantIdCard: "",
        tenantName: "",
        tenantPhoneNumber: "",
      });
    },
    handleRemove(index) {
      this.sendData.tenantDTOList.splice(index, 1);
    },
    back() {
      uni.navigateBack();
    },
    chooseimg(name) {
      var that = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: function (res) {
          const uploadTask = uni.uploadFile({
            // url: "http://yunchuang.natapp1.cc/file/photo/upload",
            url: "https://xcx.cloudhouse.live/file/photo/upload",
            filePath: res.tempFilePaths[0],
            name: "file",
            header: {
              token: uni.getStorageSync("token"),
            },
            formData: {},
            success: function (uploadFileRes) {
              let imgdata = JSON.parse(uploadFileRes.data);
              that.adddata.facePhoto = imgdata.data.photoBase64;
              that.adddata.facePhotoUrl = imgdata.data.photoUrl;
            },
          });
        },
      });
    },
    chooseInvoiceTitle() {
      uni.chooseInvoiceTitle({
        success: (res) => {
          console.log(res.type);
          console.log(res.title);
          console.log(res.taxNumber);
          console.log(res.companyAddress);
          console.log(res.telephone);
          console.log(res.bankName);
          console.log(res.bankAccount);
          if (this.adddata.invoiceType == 2) {
            this.adddata.invoiceTitle = res.title;
          } else {
            this.adddata.invoiceTitle = res.title;
            this.adddata.taxpayerRegistrationNum = res.taxNumber;
            this.adddata.bankAndNumber = res.bankAccount;
          }
        },
      });
    },
  },

  onShow() {},
  onLoad(add) {
    this.add = add.add;
    if (add.add == 0) {
      uni.setNavigationBarTitle({
        title: "编辑发票抬头",
      });
      uni.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: "#ffffffff",
        animation: {
          duration: 400,
          timingFunc: "easeIn",
        },
      });
      this.adddata = JSON.parse(add.item);
    } else {
      uni.setNavigationBarTitle({
        title: "新建发票抬头",
      });
      uni.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: "#ffffffff",
        animation: {
          duration: 400,
          timingFunc: "easeIn",
        },
      });
    }

    // this.getHotelList(); //获取酒店下拉
    // this.getRoleList(); //获取角色下拉
  },
};
</script>
<style scope>
.orderTypeTitle {
  width: 100%;
  font-size: 32upx;
  color: #797979;
  padding: 20upx 44upx;
}
.yudingbox {
  width: 100%;
  margin-top: 5upx;
  background: #fff;
  display: flex;
}
.yudingbox .item {
  flex: 1 1 auto;
  text-align: center;
}
.yudingbox .bg {
  margin: 0 auto;
  width: 240upx;
  height: 80upx;
  background: #f5f5f5;
  border-radius: 8upx;
}
.yudingbox .bg text {
  display: inline-block;
  font-size: 32upx;
  color: #000;
  width: 240upx;
  height: 80upx;
  border-radius: 8upx;
  line-height: 80upx;
}
.borderblue {
  /* border-bottom: 4upx solid rgba(78, 109, 210, 1); */
  width: 240upx;
  height: 80upx;
  background: url(../../static/img/bgg.png) no-repeat center center;
  background-size: 100% 100%;
  /*    background-repeat: no-repeat;
		    background-size: cover;
		background-position: center center; */

  color: #fff !important;
}
.page {
  background: white;
  height: 100%;
}
.head {
  /* border-radius: 8px 8px 0px 0px; */
  height: 78rpx;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.head.color1 {
  background: #6585f2;
  color: white !important;
}

.head.color2 {
  background: #ff9125;

  color: white !important;
}

.head.color3 {
  background: #0cdb9e;

  color: white !important;
}

.head.color4 {
  background: #c0c0c0;
  color: white !important;
}

.head.color5 {
  border-bottom: 1rpx solid #c0c0c0 !important;
  color: black;
}

.cu-form-group .title {
  min-width: calc(6em + 17px);
}

.duanxin {
  background: #ff9125 !important;
  color: white !important;
}

.rili {
  height: 20px;
  width: 20px;
}

.title {
  text-align: justify;
  text-align-last: justify;
}

.yu {
  background: #6485f0 !important;
  color: white !important;
}

.leaveimg {
  height: 15px;
  width: 15px;
  margin-left: 5px;
}

.picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price {
  color: red;
}

.total {
  color: #6585f2;
  margin-left: 5px;
}

.btn {
  display: flex;
  background: #6585f2;
  height: 35px;
  width: 80px;
  border-radius: 5px;
  margin-right: 5px;
}

.btn .xiabai {
  height: 10px;
  width: 15px;
}

.btn .l {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 2;
}

.btn .r {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.formview {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.formview form {
}

.sendbtn {
  flex: 1;
  padding: 0 10px;
  margin-top: 20px;
}

.sendbtn button {
  width: 100%;
}

.add {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.jiac {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: white;
  padding-right: 10px;
}

.jia {
  height: 10px;
  width: 10px;
  margin-right: 5px;
}
.navibarview {
  height: 64px; /* 其他样式值 */
  padding-top: 40rpx;
}
.navibarviewIPX {
  height: 88px; /* 其他样式值 */
  padding-top: 88rpx;
}
.dian {
  width: 100%;
  margin-left: -4upx;
}
.select-time {
  position: absolute;
  width: 100%;
  z-index: 999;
}
.rili {
  height: 20px;
  width: 20px;
}
.xia {
  height: 20upx;
  width: 28upx;
  margin-right: 24upx;
  position: absolute;
  right: 0upx;
  top: 10upx;
}
.footdetail .color1 {
  height: 10px;
  width: 10px;
  background: #ff7300;
  margin-left: 10px;
  border-radius: 2px;
}
.footdetail .color2 {
  height: 10px;
  width: 10px;
  background: #a1b1e5;
  margin-left: 10px;
  border-radius: 2px;
}
.footdetail .color3 {
  height: 10px;
  width: 10px;
  background: #acacac;
  margin-left: 10px;
  border-radius: 2px;
}
.footdetail .color4 {
  height: 10px;
  width: 10px;
  background: #00dd9c;
  margin-left: 10px;
  border-radius: 2px;
}
.footimg {
  height: 12px;
  width: 12px;
  margin-left: 10px;
}
.footdetail > view {
  display: flex;
  align-items: center;
  color: #767676;
  background: white;
}
.footdetail text {
  margin-left: 10px;
}
.search_form {
  background: white;
  width: 100%;
  display: flex;
  align-items: center;
}
.showtime {
  padding: 5px 10px;
  border-radius: 4px 4px 4px 4px;
  background: white;
}
.upimg {
  height: 80px;
  width: 80px;
}
.imglist {
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 10px 0;
}
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.pcimg {
  font-size: 9px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: rgba(255, 145, 37, 1);
  margin-top: 10px;
}
.yulan {
  display: inline-block;
  padding-left: 20upx;
  color: #6485f0;
}
.PA-add .cu-btn.lg {
  margin-left: 0px !important;
}
.PA-add .sendbtn {
  padding: 0upx;
  margin-left: 64upx;
  margin-right: 64upx;
}
.PA-add .sendbtn .cu-btn {
  height: 80upx;
  line-height: 80upx;
  background: rgba(100, 133, 240, 1);
  border-radius: 40upx;
  text-align: center;
  font-size: 32upx;
  color: #fff;
}
.PA-add .formview form {
  flex: none;
}
.PA-add .cu-form-group-last {
  padding-top: 20upx;
  margin: 0 44upx;
}
.PA-add .cu-form-group-last .title {
  font-size: 32upx;
  font-weight: bold;
}
.PA-add .cu-form-group-last .imglist {
  margin-left: 20upx;
}
</style>
